<template>
  <el-dialog :title="this.$route.query.title + `-新增用户`"
             :visible="true"
             append-to-body
             fullscreen
             :before-close="handleClose">
    <el-main class="auth">
      <!-- 左边栏 -->
      <el-aside width="250px"
                style="margin-right:20px">
        <el-card class="box-card">
          <div slot="header">
            <span>单位树</span>
          </div>
          <el-tree :data="treeItem"
                   :props="treeProps"
                   node-key="deptId"
                   :highlight-current="true"
                   :default-expanded-keys="expandedId"
                   @node-click="treeClick">
          </el-tree>
        </el-card>
      </el-aside>
      <div style="width:100%">
        <!-- 顶栏容器 -->
        <!-- 查询框 -->
        <el-form class="my-search-form-box"
                 :model="searchItem"
                 @submit.native.prevent
                 inline>
          <div class="my-search-form-left">
            <el-form-item label=" 用户姓名：">
              <el-input v-model="searchItem.userName"
                        size="small"
                        placeholder="请输入用户姓名"
                        @change="doSearch"
                        style="width: 160px;"></el-input>
            </el-form-item>
          </div>
          <div class="my-search-form-right">
            <el-button type="primary"
                       size="small"
                       @click="doSearch">搜索</el-button>
            <el-button type="primary"
                       size="small"
                       @click="handleAdd"
                       title="与统一授权数据同步">添加用户</el-button>
          </div>
        </el-form>

        <!-- <div class="search-box">
        <div class="conditions-box">
          <div class="conditions-item">
            用户姓名:
            <el-input v-model="searchItem.userName"
                      size="small"
                      placeholder="请输入用户姓名"
                      @change="doSearch"
                      style="width: 160px;"></el-input>
          </div>
        </div>
        <div class="search-btn">
          <el-button type="primary"
                     size="small"
                     @click="doSearch">搜索</el-button>
          <el-button type="primary"
                     size="small"
                     @click="doSync"
                     title="与统一授权数据同步">同步</el-button>
        </div>
      </div> -->
        <!-- 主要区域容器 -->
        <div class="my-table-pagination">
          <el-table :data="tableItem.records"
                    stripe
                    class="my-table"
                    size="medium"
                    :height="tableHeight"
                    @selection-change="handleSelectionChange"
                    v-loading="tableLoading">
            <el-table-column type="selection"
                             align="center"
                             width="55">
            </el-table-column>
            <el-table-column prop="userOrder"
                             label="排位顺序"
                             align="center"
                             width="100"></el-table-column>
            <el-table-column prop="userName"
                             label="用户姓名"
                             align="center"></el-table-column>
            <el-table-column prop="roleName"
                             label="已分配角色"
                             align="center"></el-table-column>
            <el-table-column prop="phone"
                             label="手机号"
                             align="center"
                             width="150"></el-table-column>
            <el-table-column prop="lasttime"
                             label="同步/维护时间"
                             align="center"
                             width="150"
                             :formatter="(row, column) => $moment(row.firsttime).format('YYYY年MM月DD日')"></el-table-column>
            <!-- <el-table-column prop="state"
                             label="当前状态"
                             align="center"
                             width="120">
              <template slot-scope="{row}">
                <span v-if="row.state==='停用'"
                      style="color: #F04134">{{row.state}}</span>
                <span v-else
                      style="color: #67C23A">{{row.state}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="operations"
                             label="操作"
                             align="center"
                             width="150">
              <template slot-scope="{row}">
                <el-button v-if="row.state==='停用'"
                           type="text"
                           size="medium"
                           @click="doEnable(row)">启用
                </el-button>
                <el-button v-else
                           type="text"
                           size="medium"
                           @click="doDisable(row)">停用</el-button>
                <el-button v-if="row.empowerDeptId===''"
                           type="text"
                           size="medium"
                           @click="doDelete(row)">
                  删除
                </el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <el-pagination @size-change="sizeChange"
                         @current-change="currentChange"
                         style="float: right;"
                         :current-page="tableItem.current"
                         :page-count="tableItem.pages"
                         :total="tableItem.total"
                         :page-sizes="[10, 20, 50, 100]"
                         layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </div>
    </el-main>
  </el-dialog>

</template>

<script>
  export default {
    name: '',

    components: {},
    data () {
      return {
        // 单位树
        treeItem: [],
        treeProps: {
          children: 'childs',
          label: 'deptName'
        },
        expandedId: [],
        // 查询
        searchItem: {
          deptId: ''
        },
        formData: {
          roleId: this.$route.query.roleId,
          userIds: []
        },
        // 表格
        tableHeight: -1,
        tableItem: {},
        tableLoading: false
      }
    },
    props: {},
    created () {
      this.getTree()
    },
    methods: {
      handleClose () {
        this.$emit('update:visible', false)
        // console.log(this.$parent.$parent)

        this.$parent.$parent.getUserList()
      },
      // 获取单位树
      getTree () {
        this.$axios.get(this.$api.dept.getTree).then((rs) => {
          if (rs) {
            this.treeItem = rs
            if (rs[0]) {
              this.searchItem.deptId = rs[0].deptId
              this.expandedId[0] = rs[0].deptId
              this.doSearch()
            }
          }
        })
      },
      // 树节点点击事件
      treeClick (data) {
        this.searchItem.deptId = data.deptId
        this.doSearch()
      },
      // 同步
      // doSync () {
      //   this.tableLoading = true
      //   this.$axios.get(this.$api.user.doSync + '/' + this.searchItem.deptId).then((rs) => {
      //     if (rs) {
      //       this.$message({ message: '操作成功!', showClose: true, type: 'success' })
      //       this.doSearch()
      //     }
      //   })
      // },
      // 添加用户按钮
      handleAdd () {
        if (this.formData.userIds.length <= 0) {
          this.$message.warning('请选择一个或多个用户！')
          return false
        }
        this.tableLoading = true
        this.$axios.post(this.$api.user.assignRole, this.formData).then(res => {
          this.tableLoading = false
          if (res) {
            this.$message.success('操作成功！')
            this.getPage()
          }
        })
      },
      // 查询
      doSearch () {
        this.getPage()
      },
      // 获取用户分页列表
      getPage () {
        this.tableLoading = true
        this.tableItem.params = this.searchItem
        this.$axios.post(this.$api.user.getPage, this.tableItem).then((rs) => {
          if (rs) {
            this.tableItem = rs
            this.tableLoading = false
          }
        })
      },
      // 分页
      sizeChange: function (size) {
        this.tableItem.size = size
        this.doSearch()
      },
      // 分页
      currentChange: function (current) {
        this.tableItem.current = current
        this.doSearch()
      },
      // 启用
      doEnable (row) {
        this.$confirm('此操作会对该单位进行启用操作，是否继续?', '提示', {
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$axios.get(this.$api.user.doEnable + '/' + row.deptId).then((rs) => {
            if (rs) {
              this.$message({
                message: '操作成功!',
                showClose: true,
                type: 'success',
                closeOnClickModal: false
              })
              this.doSearch()
            }
          })
        }).catch(() => {
        })
      },
      // 停用
      doDisable (row) {
        this.$confirm('此操作会对该单位进行停用操作，是否继续?', '提示', {
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$axios.get(this.$api.user.doDisable + '/' + row.deptId).then((rs) => {
            if (rs) {
              this.$message({ message: '操作成功!', showClose: true, type: 'success' })
              this.doSearch()
            }
          })
        }).catch(() => {
        })
      },
      // 删除
      doDelete (row) {
        this.$confirm('此操作会对该单位进行删除操作，是否继续?', '提示', {
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$axios.get(this.$api.user.doDelete + '/' + row.deptId).then((rs) => {
            if (rs) {
              this.$message({
                message: '操作成功!',
                showClose: true,
                type: 'success',
                closeOnClickModal: false
              })
              this.doSearch()
            }
          })
        }).catch(() => {
        })
      },
      handleSelectionChange (val) {
        this.formData.userIds = val.map(item => item.userId)
      }
    }
  }
</script>

<style lang='scss' scoped>
  .auth {
    display: flex;
    overflow: auto;
    .el-aside {
      .el-aside {
        padding: 20px 0 10px 20px;
      }
    }

    .el-card__header {
      background-color: #e5f1fb;
      border-left: 2px solid #2387e2;
    }

    .el-card__body {
      padding: 0;
      overflow: auto;
      height: calc(100vh - 280px);
    }

    .el-tree {
      .is-current > .el-tree-node__content:nth-of-type(1) {
        color: #2387e2;
      }

      .is-current > .el-tree-node__content .el-tree-node__expand-icon {
        color: #2387e2;
      }
    }

    .el-table {
      height: calc(100vh - 245px);
    }
  }
</style>
